<template>
	<view class="pageItem">
		<!-- <view class="card has_total">
			<view class="total">
				<label class="num">{{userInfo.gold||'0.00'}}</label>{{$t('bean.current_bean')}}
			</view>
			<view class="select">
				<view class="s_tit">{{$t('bean.pay_title')}}</view>
				<view class="s_item">
					<block v-for="(item,index) in list" :key="'p_'+index">
						<view class="s_box" :class="item.id == s_id ? 's_box_s':''" @click="selectChange" :data-id="item.id">
							<view class="s_b_price">
								{{$t('use.money_code')}}
								<label class="price">{{item.money}}
								</label>
							</view>
							<view class="s_b_bean">
								{{parseInt(item.gold)}}<label class="bean">{{$t('use.bean')}}</label>
							</view>
							<image class="bean_bg" src="/static/other/bean.png" mode="widthFix"></image>
							<view class="iconfont icon" v-if="item.id == s_id">&#xe730;</view>
						</view>
					</block>
				</view>
			</view>
		</view> -->
		
	
		
		
		<view class="card" >
			<view class="address_item">
				<view class="add_tit">{{$t('bean.pay_address')}}</view>
				<view class="row2">
					<view class="text2">{{tron_code}}</view>
					<view class="iconfont copy" @click="copyFun">&#xe6cd;</view>
				</view>
			</view>
		</view>
		
	
		<view class="tip_item">
			<view class="t_tit">{{$t('use.tip_title')}}</view>
			<view class="t_txt">{{$t('usdtbean.pay_tip1')}}</view>
			<view class="t_txt">{{$t('usdtbean.pay_tip2')}}</view>
			<view class="t_txt">{{$t('usdtbean.pay_tip3')}}</view>
		</view>
		
		
		<!-- <canvas canvas-id="canvas" style="width:36vw; height:36vw;" id="canvas"></canvas> -->
		
	</view>
</template>

<script>
	import { mapState} from 'vuex';
	import helper from '@/common/helper.js';
	import qrcode from '@/common/wxqrcode.js'
	export default {
		data() {
			return {
				// 二维码绘制对象
				qrcode        : null,
				// 二维码尺寸，单位 rpx
				qrcodeSize    : 280,
				// 二维码背景颜色
				qrcodeBgColor : '#FFFFFF',
				// 二维码颜色
				qrcodeColor   : '#000000',
				// 画布 id
				qrcodeId      : 'canvas',
				
				agree:false,
				tron_code : '',
				s_id:'1',
				list : [],
				priceArr:[
					{id:1,price:'39.9',bean:'399'},{id:2,price:'69.9',bean:'699'},
					{id:3,price:'88.8',bean:'888'},{id:4,price:'99.9',bean:'999'}
				],
				p_id:'paypal',
				payArr:{
					"en":[
						{id:'paypal',logo:'/static/pay/paypal.png',txt:'Paypal'},
					    // {id:'stripe',logo:'../../static/pay/stripe.png',txt:'Stripe'},
						{id:'usdt',logo:'../../static/pay/USDT.png',txt:'USDT'},
						{id:'balance',logo:'../../static/pay/balance.png',txt:'balance'}
					],
					
					"zh-Hant":[
						{id:'paypal',logo:'/static/pay/paypal.png',txt:'Paypal'},
						// {id:'stripe',logo:'../../static/pay/stripe.png',txt:'Stripe'},
						{id:'usdt',logo:'../../static/pay/USDT.png',txt:'USDT'},
						{id:'balance',logo:'../../static/pay/balance.png',txt:'balance'}
						//{id:'alipay',logo:'/static/pay/alipay.png',txt:'支付宝'},
						// {id:'wxpay',logo:'/static/pay/wxpay.png',txt:'微信'},
					],
					
					"jp":[
						{id:'paypal',logo:'../../static/pay/paypal.png',txt:'Paypal'},
						// {id:'stripe',logo:'../../static/pay/stripe.png',txt:'Stripe'},
						{id:'usdt',logo:'../../static/pay/USDT.png',txt:'USDT'},
						{id:'balance',logo:'../../static/pay/balance.png',txt:'balance'}
					]
				},
				appLocale: '',
			};
		},
		computed: {
			...mapState(['hasLogin', 'userInfo'])
		},
		onLoad() {
			this.initData();
			
			this.appLocale = uni.getLocale();
		},
		methods:{
			create_qrcode(){
				this.wechat_qr_img = qrcode.createQrCodeImg(this.tron_code)
			},
			initData(){
				let url = this.site_url + 'api/index/gold_list';
				this.areq(url).then(res=>{
					if(res.code == 1){
						this.list = res.data;
					}
				});
				
				let pay_url = this.site_url + 'api/auth/home/get_tron_ewm';
				this.areq(pay_url).then(res=>{
					if(res.code == 1){
						this.tron_code = res.data;
						//console.log(ret)
						//this.create_qrcode();
				
					}else{
						this.showMsg(res.msg)
					}
					
					
				})
			},
			payFun(){
				if(!this.agree){
					uni.showToast({
						title:this.$t('public.pay_bean_cc'),
						icon :"none"
					})
					return
				}
				if(this.p_id == 'paypal'){
					uni.$u.throttle(this.real_paypal, 1500);
				}else if(this.p_id == 'usdt'){
					uni.$u.throttle(this.real_stript, 1500);
				}else{
					uni.$u.throttle(this.real_balance, 1500);
				}
	
			},
			real_stript(){
				
				//this.showMsg('TR7NHqjeKQxGTCi8q8ZY4pL8otSzgjLj6t');
				
				//return false;
				
				// if(!this.s_id){
				// 	this.showMsg('请选择充值金额')
				// 	return false
				// }
				// let params = {
				// 	gold_id : this.s_id
				// };
				
				// uni.showLoading({
				// 	title: this.$t('acc.loading')+'...',
				// 	mask: true,
				// });
				//helper.Timer.start();
				let pay_url = this.site_url + 'api/auth/home/get_tron_ewm';
				this.areq(pay_url,params,'POST').then(res=>{
					if(res.code == 1){
						this.tron_code = res.data;
						//console.log(ret)
						//this.create_qrcode();
					}else{
						this.showMsg(res.msg)
					}
				})
			},
			real_balance(){
				if(!this.s_id){
					this.showMsg(this.$t('system.tip3'))
					return false
				}
				let params = {
					gold_id : this.s_id
				};
				uni.showLoading({
					title: this.$t('acc.loading')+'...',
					mask: true,
				});
				helper.Timer.start();
				let pay_url = this.site_url + 'api/auth/home/balanceCreateorder';
				this.areq(pay_url,params,'POST').then(res=>{
				      helper.Timer.stop();
				      let left_time = helper.Timer.getLeftTime(2000);
				      setTimeout(()=>{
				      	uni.hideLoading();
				      	if(res.code == 1){
							uni.$emit('auto_update');
							uni.$emit('rech_update');
				      		this.showMsg(this.$t('system.tip30'), 2000, true, 'success');
				      		setTimeout(() => {
				      			this.$r('/pages/bean/bean','red');
				      		}, 1500)
				      	}else{
				      		this.showMsg(res.msg);
				      	}
				      },left_time);
					  
				})
				
			},
			 real_paypal(){
					if(!this.s_id){
						this.showMsg(this.$t('system.tip3'))
						return false
					}
					let params = {
						gold_id : this.s_id
					};
					uni.showLoading({
						title: this.$t('acc.loading')+'...',
						mask: true,
					});
					helper.Timer.start();
			        let pay_url = this.site_url + 'api/auth/home/paypalCreateorder';
					this.areq(pay_url,params,'POST').then(res=>{
						helper.Timer.stop();
						let left_time = helper.Timer.getLeftTime(2000);
						uni.hideLoading();
						   setTimeout(()=>{ 
								if(res.code == 1){
									let ret = res.data
									//console.log(ret)
									let out_trade_no = ret.order_sn;
									let total = ret.amount;
									let returnUrl = ret.links[1].href;
									// 编码参数以确保URL的安全性
									let encodedTotal = encodeURIComponent(total);
									let encodedOutTradeNo = encodeURIComponent(out_trade_no);
									let PAYID = ret.id;
									// let encodedReturnUrl = encodeURIComponent(returnUrl);
									// 构造带查询参数的URL
									let url = `/pages/public/pay?total=${encodedTotal}&out_trade_no=${encodedOutTradeNo}&paypal_id=${PAYID}`;
									uni.navigateTo({
										url:url
									});
									
								}else{
									this.showMsg(res.msg)
								}
						 },left_time);

					})
					
			},
			selectChange(e){
				this.s_id = e.currentTarget.dataset.id;
			},
			payChange(e){
				this.p_id = e.currentTarget.dataset.id;
			},
			agreeChange(_flag){
				this.agree = _flag;
			},
			copyFun(){
				uni.setClipboardData({
					data: this.tron_code,
					success(e) {
						uni.showToast({
							icon: 'success',
							title:''
						})
					}
				})
			}
		}
	}
</script>

<style lang="scss">
.pageItem{
	padding-bottom: 28vw;
}
.bg_item {
	@include bg_item(90vw);
}
.has_total{
	padding-top: 15vw !important;
	.select{
		padding-top: 3vw !important;
	}
}
.card{
	@include card_style();
	position: relative;
	z-index: 2;
	width: 92%;
	margin-left: 4%;
	margin-top: 4vw;
	display: inline-block;
	overflow: hidden;
	.total{
		width: 100%;
		position: absolute;
		top: 0;
		left: 0;
		height: 15vw;
		background: $main_color_s2;
		padding: 1vw 4vw 0;
		display: flex;
		align-items: center;
		font-size: 3.6vw;
		color: #fff;
		.num{
			font-size: 6vw;
			padding: 0 2vw 1vw 0;
		}
	}
	.select{
		width: 100%;
		.s_tit{
			font-size: 3.8vw;
			color: $main_color5;
			font-weight: bold;
			padding-bottom: 1vw;
		}
		.s_item{
			width: 100%;
			display: flex;
			flex-wrap: wrap;
			.s_box:not(:nth-child(2n+1)){
				margin-left: 2%;
			}
			.s_box{
				width: 49%;
				margin-top: 2vw;
				border-radius: 2vw;
				background: #F8F6F7;
				padding: 3vw 2vw;
				position: relative;
				.s_b_price{
					width: 100%;
					text-align: center;
					font-size: 4vw;
					font-weight: bold;
					color: #222;
					position: relative;
					z-index: 2;
					.price{
						font-size: 4.5vw;
					}
				}
				.s_b_bean{
					width: 100%;
					text-align: center;
					font-size: 3.2vw;
					color: #222;
					padding-top: 1vw;
					position: relative;
					z-index: 2;
					.bean{
						padding-left: 1vw;
					}
				}
				.icon{
					position: absolute;
					z-index: 2;
					font-size: 4vw;
					color: $main_color5;
					left: 2vw;
					top: 2vw;
				}
				.bean_bg{
					position: absolute;
					z-index: 1;
					width: 8vw;
					bottom: 1vw;
					right: 1vw;
				}
			}
			.s_box_s{
				background: $main_color_s2;
				.s_b_price{
					color: $main_color5;
				}
				.s_b_bean{
					color: $main_color5;
				}
			}
		}
		.pay_item{
			width: 100%;
			.row{
				width: 100%;
				display: flex;
				align-items: center;
				margin-top: 6vw;
				.logo{
					width: 6vw;
				}
				.text{
					flex: 1;
					font-size: 4vw;
					font-weight: bold;
					color: $main_color5;
					padding: 0 3vw;
				}
				
				.select{
					width: 4.3vw;
					color: $main_color;
				}
			}
		}
	}
}
.address_item{
	width: 100%;
	.add_tit{
		font-size: 3.8vw;
		color: $main_color5;
		font-weight: bold;
		padding-bottom: 1vw;
	}
	.row2{
		width: 100%;
		display: flex;
		align-items: center;
		margin-top: 2vw;
		.text2{
			flex: 1;
			font-size: 4vw;
			color: $main_color5; 
			@include text_over_style(1);
			display: block;
		}
		.copy{
			font-size: 6vw;
			color: $main_color_s2;
			margin-left: 4vw;
		}
	}
}
.balance_item{
	@include card_style();
	width: 92%;
	margin-left: 4%;
	background: $main_color2_s;
	display: flex;
	align-items: center;
	margin-top: 4vw;
	.b_tit{
		font-size: 4vw;
		font-weight: bold;
		color: $main_color5;
		flex: 1;
	}
	.b_txt{
		font-size: 4vw;
		font-weight: bold;
		color: $main_color_s2;
	}
}
.tip_item{
	width: 100%;
	padding: 4vw 4%;
	.t_tit{
		width: 100%;
		font-size: 3.6vw;
		color: $main_color5;
		font-weight: bold;
	}
	.t_txt{
		padding-top: 3vw;
		font-size: 3.5vw;
		color: $main_color4;
		line-height: 5.5vw;
	}
}
._footer{
	@include page_button();
	background: $main_bg_color;
	position: fixed;
	z-index: 98;
	bottom: 0;
	left: 0;
	height: 28vw;
	padding: 9vw 0 6vw;
	.agree{
		position: absolute;
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 2.8vw;
		color: #999999;
		top: 1vw;
		.a_icon{
			width: 3.3vw;
			height: 3.3vw;
			font-size: 2.8vw;
			color: #C8C8C8;
			margin-right: 2vw;
			border-radius: 50%;
			display: flex;
			align-items: center;
			justify-content: center;
		}
		.a_icon_s{
			color: $main_color;
		}
		.a_txt{
			display: flex;
			align-items: center;
			line-height: 4vw;
			.a_t2{
				color: $main_color;
			}
		}
	}
}
</style>
